<template>
  <div class="baseList">
    <div class="newBox">
      <button class="bt wt-120" @click="handleBulid()">
        新增护理项目
      </button>
    </div>
    <div class="tableBoxs">
      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
      <t-table :row-key="rowKey" :data="data" :columns="COLUMNS" vertical-align="middle" :hover="hover"
        :loading="dataLoading" tabel-content-width="100%" table-layout="fixed">
        <!-- 序号 -->
        <template #rowIndex="{ rowIndex }">
          {{ (pagination.pageNum - 1) * pagination.pageSize + (rowIndex + 1) }}
        </template>
        <!-- 图片预览 -->
        <template #image="{ row }">
          <div>
            <div class="tdesign-demo-image-viewer__base">
              <t-image-viewer :images="[row.image]">
                <template #trigger="{ open }">
                  <div class="tdesign-demo-image-viewer__ui-image">
                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                      <span>
                        <BrowseIcon size="1.4em" /> 预览
                      </span>
                    </div>
                  </div>
                </template>
              </t-image-viewer>
            </div>
          </div>
        </template>
        <!-- 价格拼接 -->
        <template #price="{ row }">
          {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
        </template>

        <!-- 按钮处理 -->
        <template #op="{ row }">
          <div class="operateCon">
            <a class="btn-dl" :class="row.count > 0 ? 'disabled' : ''" @click="handleDelete(row)">删除</a>
            <a class="font-bt" :class="row.count > 0 ? 'disabled' : ''" @click="handleEdit(row)">编辑</a>
            <a class="delete" :class="row.count > 0 && row.status === 1
              ? 'disabled btn-dl'
              : row.status === 1
                ? 'btn-dl'
                : 'font-bt'
              " @click="handleSubmit(row)">{{ row.status === 1 ? '禁用' : '启用' }}</a>
          </div>
        </template>
      </t-table>
      <!-- 分页 -->
      <t-pagination v-if="total > 10" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="total"
        @change="onPageChange" />

    </div>
  </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'

/* 接收父组件传递过来的属性 */
const props = defineProps({
  data: {
    type: Object,//定义类型
    default: () => { }//给默认初始化值，为空
  },
  total: Number,
  pagination: {
    type: Object,//定义类型
    default: () => { }//给默认初始化值，为空
  },
  dataLoading: {
    type: Boolean,
    default: false
  }
})
/* 定义接收父组件传递过来的方法 */
const emit = defineEmits(['onPageChange', 'handleBulid', 'handleEdit', 'handleDelete', 'handleStatus'])
/* 执行单击触发翻页事件 */
const onPageChange = (val) => {
  emit('onPageChange', val)
}
//编辑   参数为一行数据
const handleEdit = (row) => {
  emit('handleEdit', row)
}
// 判断当前参数是否包含小数点
const isDecimals = (val) => {
  // 如果值转换为字符串后包含 '.'，则返回true
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  // 若未找到小数点，则返回false
  return false;
}

// 定义一个处理新增按钮点击事件的方法
const handleBulid = () => {
  // 当点击新增按钮时，触发上级组件的handleBulid方法
  emit('handleBulid')
}

// 定义一个处理删除按钮点击事件的方法
const handleDelete = (row) => {
  // 当点击删除按钮时，触发上级组件的handleDelete方法，并传入当前行数据
  emit('handleDelete', row)
}

// 定义一个处理禁用按钮点击事件的方法
const handleSubmit = (row) => {
  // 当点击禁用按钮时，触发上级组件的handleStatus方法，并传入当前行数据
  emit('handleSubmit', row)
}
</script>